<template>
  <div class="calender">
    <el-calendar v-model="curDate">
      <template #dateCell="{data}" >
        <div @click="setCur(data.day)" :class="{'is-selected' : data.isSelected}">
          <div >{{data.day.split("-")[2]}}</div>
          <!-- <div>
            <div v-for="(item,idx) in dot(data.day)" :key="idx">{{item.title}}</div>
            </div> -->
          <span v-if="dot(data.day)">*</span>
        </div>
      </template>
    </el-calendar>
     <list-item
      v-for="todo in curList"
      :key="todo.id"
      @toggle="val=>todo.isDone=val"
      :todo="todo"></list-item>
  </div>
</template>
<style scoped>
 .is-selected{color:red}
 .calender >>>  .el-calendar-table .el-calendar-day {
    height: 50px;
  }
</style>
<script>
import { useStore } from 'vuex'
import { ref, computed } from 'vue'
import { formatDate } from '@/utils'

export default {
  data () {
    return {
    }
  },
  setup (props, context) {
    const curDate = ref(new Date())
    // const curList = ref([])

    const store = useStore()

    const curList = computed(() => {
      const d = formatDate(curDate.value)
      const rs = store.state.list.filter(item => item.date === d)
      console.log('computed', d)
      return rs
    })

    const setCur = (date) => {
      curDate.value = date
      // const rs = store.state.list.filter(item => item.date === date)
      // console.log('setCur', date, rs)
      // curList.value = rs
    }

    const dot = (date) => {
      const rs = store.state.list.filter(item => item.date === date)
      console.log('过滤结果', date, rs)
      return rs.length
    }

    return {
      dot,
      curDate,
      curList,
      setCur
    }
  }
}
</script>
